<template>
  <div>
    <!-- 用例信息区 -->
    <div class="w">
      <div class="title-area">
        <span>用例信息</span>
      </div>
      <div class="content-area" style="padding-top: 15px;">
          <Row class="info-row">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">用例名称：</div></Col>
            <Col :span="16"><div>{{ record.name }}</div></Col>
          </Row>
          <Row class="info-row">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">用例代码：</div></Col>
            <Col :span="16"><div>{{ record.code }}</div></Col>
          </Row>
          <Row class="info-row">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">用例描述：</div></Col>
            <Col :span="16"><div>{{ record.description }}</div></Col>
          </Row>
          <Row>
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">适用场景：</div></Col>
            <Col :span="16"><div>{{ record.type }}</div></Col>
          </Row>
      </div>
    </div>

    <!-- 输入输出区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>输入输出</span>
      </div>
      <div class="content-area">
        <Row class="info-row" style="padding-top: 15px;">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">输入：</div></Col>
            <Col :span="16"><div>{{ record.input }}</div></Col>
        </Row>
        <Row>
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">期待输出：</div></Col>
            <Col :span="16"><div>{{ record.output }}</div></Col>
        </Row>
      </div>
    </div>

    <!-- 脚本文件区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>脚本文件</span>
      </div>
      <div class="content-area">
        <Table
          style="margin-top: 20px"
          :columns="tableColumns"
          :dataSource="tableData"
          :bordered="false"
          :rowKey="(record) => record.key"
          :pagination="false">
        </Table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "app",
    data: function () {
      return {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 15
        },
        record: {},
        tableColumns: [
          {"title":"脚本名称", "dataIndex":"script", "key":"script"},
          {"title":"文件名称", "dataIndex":"file", "key":"file"},
          {"title":"描述", "dataIndex":"desc", "key":"desc"},
          {"title":"操作", "dataIndex":"operation", "key":"operation", "width":80,
            render: (text, record, index) => {
              return this.$createElement('a', { on: { click: () => this.tblOptDownload(record) } }, '下载')
            }
          },
        ],
        tableData: [
          { "script":"数据测试脚本", "file":"data_testing.sql", "desc":"测试人员" },
          { "script":"压力测试脚本", "file":"big_data_testing.sql", "desc":"测试人员" },
          { "script":"功能测试脚本", "file":"function_testing.sql", "desc":"测试人员" },
          { "script":"迁移测试脚本", "file":"migration_testing.sql", "desc":"测试人员" }
        ],
      }
    },
    mounted: function () {
        this.record = this.$route.query.record;
        this.record.input="create resource group test_group with (storage_limit = 8, temp_storage_limit = 8, location = '/home/pgadmin/testgroup');";
        this.record.output='表中创建资源组成功';
        this.record.description = `` +
            `中国联通设计价值观为“设计系统”的设计者以及基于“设计系统”进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。` +
            `我们基于“理性”“一致”“高效”“生长”的设计价值观，运用模块化的解决方案，降低冗余的生产成本，让设计者更好的专注于用户体验。` +
            `瀚高为企业级客户精心打造的一款拥有完全国产自主知识产权、面向核心交易型业务处理的企业级关系型数据库，全面拓展了丰富的企业级功能，在业务处理性能、高可用性、安全性及易用性方面均有不同程度的增强。` +
            `秉承开放、合作、共赢的合作理念，通过提供销售、市场、技术等全方位的支持，助力合作伙伴成功构建基于瀚高产品的业务，实现业务创新，持续为客户和伙伴创造价值。`;

        console.log("this.record: ", this.record);
    },
    methods: {
        tblOptDownload: function (record) {
            console.log("record: ", record);
        },
        submit: function () {
            console.log("Submit...");
        },
        cancel: function () {
            this.$router.push('/productInfoMgr');
        }
    }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }
  /* 基本信息区域 */
  .info-row {
    margin-bottom: 20px !important;
  }
  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

